<script setup>
	import {
		ref,
		watchPostEffect
	} from 'vue'
	import Balance from './components/Balance.vue'
	import Financial from './components/Financial.vue'
	import Discount from './components/Discount.vue'
	import Coupon from './components/Coupon.vue'
	import Withdrawal from './components/Withdrawal.vue'
	const activeTab = ref(0);
	const switchTab = (tabId) => {
		console.log(tabId)
		activeTab.value = tabId;
	};
</script>
<template>
	<div class="container">
		<div class="page-title bold">账户信息</div>
		<div class="bs-panel">
			<el-row class="account-menu-list">
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(0)">
						<img src="../../assets/images/acc-1.png" alt="">
						<span>我的余额</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(1)">
						<img src="../../assets/images/acc-2.png" alt="">
						<span>资金明细</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(2)">
						<img src="../../assets/images/acc-3.png" alt="">
						<span>折扣优惠</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(3)">
						<img src="../../assets/images/acc-4.png" alt="">
						<span>优惠券</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<Balance v-if="activeTab === 0"  @switch-to-withdrawal="switchTab(5)" />
		<Withdrawal v-if="activeTab === 5" />
		<Financial v-if="activeTab === 1" />
		<Discount v-if="activeTab === 2" />
		<Coupon v-if="activeTab === 3" />
	</div>
</template>
<style scoped lang="scss">
</style>